<template>
  <div class="app-container">

    <!--    论文题目-->
    <h3>论文题目：</h3>
    <el-input style="width: 70%"
      placeholder="请输入论文题目"
      v-model="input"
      clearable>
    </el-input>

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px">

      <!--     研究对象部分-->
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state0"
        :fetch-suggestions="querySearch0"
        placeholder="研究对象"
        @select="handleSelect0">
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick0">
        </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <span class="addr">{{ item.address }}</span>
        </template>
      </el-autocomplete>
      <!--      研究对象end-->


    <!--     研究对象子分类部分-->
      <el-autocomplete
        value-key="value"
        popper-class="my-autocomplete"
        v-model="state"
        :fetch-suggestions="querySearch"
        placeholder="研究对象子分类"
        @select="handleSelect">
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick">
        </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
        </template>
      </el-autocomplete>
    <!--      研究对象子分类end-->

      <!--     研究方法部分-->
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state2"
        :fetch-suggestions="querySearch2"
        placeholder="研究方法"
        @select="handleSelect2">
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick2">
        </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <span class="addr">{{ item.address }}</span>
        </template>
      </el-autocomplete>
      <!--      研究方法end-->

      <!--     研究问题部分-->
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state3"
        :fetch-suggestions="querySearch3"
        placeholder="研究问题"
        @select="handleSelect3">
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick3">
        </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <span class="addr">{{ item.address }}</span>
        </template>
      </el-autocomplete>
      <!--      研究问题end-->

      <!--     研究焦点-->
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state4"
        :fetch-suggestions="querySearch4"
        placeholder="研究焦点"
        @select="handleSelect4">
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick4">
        </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <span class="addr">{{ item.address }}</span>
        </template>
      </el-autocomplete>
      <!--      研究焦点-->

      <br><br><br>
      <!--      文件上传部分-->
      <el-upload
        ref="upload"
        style="width: 70%"
        class="upload-demo"
        :auto-upload=false
        action=""
        :http-request="Upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :before-upload="BeforeUpload"
        multiple
        accept=""
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">选择要上传的论文</div>
      </el-upload>
      <!--      文件上传部分-->

      <br><br><br><br><br>
      <el-row >
        <el-button type="primary" icon="el-icon-upload2" @click="uploadFile()">上传到数据库</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-row>

    </el-form>
  </div>
</template>
<script>
import axios from "axios";
import paper from "@/api/paper_add";
import cookie from 'js-cookie'

export default {
  data() {
    return {
      conditionQuery: {},//条件查询对象
      input:'', //标题框的内容
      data0:[],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      state0:'',
      state: '',
      state2:'',
      state3:'',
      state4:'',

      researchMethodList:[],
      researchObjList:[],
      researchProblemList:[],
      focusList:[],
      researchObjListALL:[],
      secondLevelResearchObjList:[],

      //上传文件部分
      fileList: [],
      newFile:new FormData(),
      filename:'',
      uploadMessage:'',
      deleteFlag:'',

      userName:'',
      paperInfo:{
        "createPerson": "",
        "focusId": "",
        "focusName": "",
        "isDeleted": false,
        "location": "",
        "paperDescr": "",
        "paperName": "",
        "researchMethodId": "",
        "researchMethodName": "",
        "researchObjId": "",
        "researchObjName": "",
        "researchObjSonId": "",
        "researchObjSonName": "",
        "researchProblemId": "",
        "researchProblemName": "",
        "fileName": ""

      },

    }
  },
  methods: {


    //-------------------------------------------------------------------------------------------------
    //上传文件部分
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning("只能上传一个文件！");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    BeforeUpload(file){
      if(file){
        this.newFile.append('file',file); //  2. 上传之前，拿到file对象，并将它添加到刚刚定义的FormData对象中。
        console.log(this.newFile.get('file'))
      }else{
        return false;
      }
    },
    Upload(){
      const newData= this.newFile; //  3. 拿到刚刚的数据，并将其传给后台
      axios({
        url:'http://l47.106.206.21:9001/paper/upload',
        method:'post',
        data: newData,
        headers:{
          'Content-Type':'multipart/form-data'
        }
      })
        .then(res => {
          //console.log(res)
        }).catch(err => {
        //console.log(err)
      })
    },
    uploadFile(){
      if(this.state!=''&&this.state2!=''&&this.state3!=''&&this.state4!=''&&this.$refs.upload.uploadFiles.length>0&&this.$refs.upload.uploadFiles[0].size>0){

        //上传论文表单数据
         let user = JSON.parse(cookie.get("user-info"))
         this.userName = user.realName
        this.paperInfo.createPerson=this.userName;
        this.paperInfo.focusName = this.state4
        this.paperInfo.paperName = this.input
        this.paperInfo.researchMethodName=this.state2
        this.paperInfo.researchObjName=this.state0
        this.paperInfo.researchObjSonName=this.state
        this.paperInfo.researchProblemName=this.state3
        this.paperInfo.fileName=this.$refs.upload.uploadFiles[0].name

       //console.log(this.paperInfo)
       //console.log(this.paperInfo.fileName)

        paper.addPaper(this.paperInfo,this.userName)
          .then(response => {
            //console.log(response)
            //文件大小
            // console.log(this.$refs.upload.uploadFiles[0].size)
            // console.log("上面是文件大小")
            if(response.data.message==="论文上传成功"){
              this.$refs.upload.submit();
              this.$message({
                message: '恭喜上传数据库成功',
                type: 'success'
              });
              this.$router.push({path:'/paper/list'})
            }else if(response.data.message==="论文已经在数据库中"){
               this.$refs.upload.clearFiles();
                this.resetData()
              this.$message({
                message: '数据库中已经有此论文',
                type: 'error'
              });
            }
          })

        //上传论文表单数据end

      }else if(this.$refs.upload.uploadFiles[0].size===0){
        this.$refs.upload.clearFiles();
        this.resetData()
        this.$message({
          message: '文件没有内容，请重新上传',
          type: 'error'
        });
      }
      else {
        this.$message({
          showClose: true,
          message: '请完整填写表单信息！',
          type: 'error'
        });

       }

    },
    //上传文件部分end

    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },



    //研究对象部分
    //begin
    querySearch0(queryString, cb) {
      var data0 = this.data0;
      var results = queryString ? data0.filter(this.createFilter0(queryString)) : data0;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter0(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll0() {
      return this.researchObjList;
    },
    handleSelect0(item) {
      //console.log(item.value);

      for(let i=0;i<this.researchObjListALL.length;i++){
        if(item.value===this.researchObjListALL[i].name){
          this.secondLevelResearchObjList.length = 0;
          for(let a=0;a<this.researchObjListALL[i].secondLevelResearchObjList.length;a++)
            this.secondLevelResearchObjList.push({ "value": this.researchObjListALL[i].secondLevelResearchObjList[a].name })
        }
      }

    },
    handleIconClick0(ev) {
      console.log(ev);

    },
    //end
    //研究对象部分

    //研究对象子分类部分
    //begin
    querySearch(queryString, cb) {
      var data1 = this.data1;
      var results = queryString ? data1.filter(this.createFilter(queryString)) : data1;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return this.secondLevelResearchObjList;
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    //end
    //研究对象子分类部分


    //研究方法部分
    //begin
    querySearch2(queryString, cb) {
      var data2 = this.data2;
      var results = queryString ? data2.filter(this.createFilter2(queryString)) : data2;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter2(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll2() {
      return this.researchMethodList;
    },
    handleSelect2(item) {
      console.log(item);
    },
    handleIconClick2(ev) {
      console.log(ev);
    },
    //end
    //研究方法部分

    //研究问题部分
    //begin
    querySearch3(queryString, cb) {
      var data3 = this.data3;
      var results = queryString ? data3.filter(this.createFilter3(queryString)) : data3;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter3(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll3() {
      return this.researchProblemList;
    },
    handleSelect3(item) {
      console.log(item);
    },
    handleIconClick3(ev) {
      console.log(ev);
    },
    //end
    //研究问题部分

    //研究焦点部分
    //begin
    querySearch4(queryString, cb) {
      var data4 = this.data4;
      var results = queryString ? data4.filter(this.createFilter4(queryString)) : data4;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter4(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll4() {
      return this.focusList;
    },
    handleSelect4(item) {
      console.log(item);
    },
    handleIconClick4(ev) {
      console.log(ev);
    },
    //end
    //研究焦点部分

    //清空表单数据
    resetData(){
      this.state0 ='';
      this.state = '';
      this.state2 = '';
      this.state3 = '';
      this.state4 = '';
      this.fileList = [];
      this.input = '';
    //清空表单数据end


    }

  },
  created(){
      paper.getAllSubjectInfo()
        .then(response => {

          this.researchMethodList.length = 0
          this.researchObjList.length = 0
          this.researchProblemList.length = 0
          this.focusList.length = 0
          this.researchObjListALL.length = 0
          //获取研究对象 研究方法  研究问题 研究焦点
          for(let i=0;i<response.data.researchMethodList.length;i++){
            this.researchMethodList.push({ "value": response.data.researchMethodList[i].name })
          };
          for(let i=0;i<response.data.researchObjList.length;i++){
            this.researchObjList.push({ "value": response.data.researchObjList[i].name })
          };
          for(let i=0;i<response.data.researchProblemList.length;i++){
            this.researchProblemList.push({ "value": response.data.researchProblemList[i].name })
          };
          for(let i=0;i<response.data.focusList.length;i++){
            this.focusList.push({ "value": response.data.focusList[i].name })
          };
          this.researchObjListALL = response.data.researchObjList;
          console.log(response.data)

        })
  },
  mounted() {
    this.data0 = this.loadAll0();
    this.data1 = this.loadAll();
    this.data2 = this.loadAll2();
    this.data3 = this.loadAll3();
    this.data4 = this.loadAll4();


  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.my-autocomplete {
li {
  line-height: normal;
  padding: 7px;

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.highlighted .addr {
  color: #ddd;
}
}
}
</style>
